<!-- 推荐官列表 -->

<template>
	<view :style="{'margin':'24rpx','margin-bottom':'0rpx','backgroundImage':'url(' + recommender.background + ')','height':'376rpx','box-shadow':'0rpx 4rpx 16rpx 0rpx rgba(209, 211, 217, 0.16)'}" @click="click_recommender_item">
		<view style="position:relative;">
			<view style="z-index: 1;position: absolute;top: 0;bottom: 0;right: 0;left: 0;">
				<!-- <image src="../../static/common/test_bac.png" style="width:100%;height: 376rpx;"/> -->
				<image :src="recommender.background" style="width:100%;height: 376rpx;"/>
			</view>
			<image src="/static/common/img_white_bac.png" style="position: absolute;right: 0;left: 0;bottom:0;top: 0rpx;height: 376rpx;width: 100%;z-index: 2;"/>
			<!-- <view class="gridient_back" style="position: absolute;right: 0;left: 0;bottom:0;top: 200rpx;height: 176rpx;width: 100%;z-index: 2;"> -->
			</view>
			<view class="flex_col center" style="width: 702rpx;position: absolute;padding-top: 40rpx;z-index: 10;">
				<fl_image avatar :src="recommender.header_icon" height="120" width="120" :compress="false" :circle="true"></fl_image>
				<view class="full_width flex_col center" style="padding-bottom: 28rpx;margin-top: 12rpx;">
					<view style="color: black;font-size: 32rpx;font-weight: bold;">{{recommender.recommender_name}}</view>
					<view style="font-size: 22rpx;color: grey;height:32rpx">{{recommender.identity}}</view>
					
					<view class="flex_row" style="margin-top: 8rpx;">
						<view class="flex_col center">
							<view style="font-size: 28rpx;color: black;">{{recommender.pallet_count}}</view>
							<view style="font-size: 28rpx;color: black;">全部货盘</view>
						</view>
						<view style="height: 32rpx;width: 1rpx;background-color: #ABB0B0;margin:22rpx 120rpx 0 120rpx"></view>
						<view class="flex_col center">
							<view style="font-size: 28rpx;color: black;">{{recommender.product_count}}</view>
							<view style="font-size: 28rpx;color: black;">全部商品</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
	<!-- <view class="flex_col center background_white background" style="margin: 24rpx;padding-top: 40rpx;">
		<fl_image :src="recommender.avatar" height="120" width="120" style="border-radius: 60rpx;border:solid white 1rpx"></fl_image>
		<view class="full_width flex_col center gridient_back" style="padding-bottom: 28rpx;margin-top: 12rpx;">
			<view style="color: black;font-size: 32rpx;font-weight: bold;">{{recommender.nick_name}}</view>
			<view style="font-size: 22rpx;color: grey;height:32rpx">{{recommender.identity}}</view>
			
			<view class="flex_row" style="margin-top: 8rpx;">
				<view class="flex_col center">
					<view style="font-size: 28rpx;color: black;">{{recommender.sample_count}}</view>
					<view style="font-size: 28rpx;color: black;">全部样衣</view>
				</view>
				<view style="height: 32rpx;width: 1rpx;background-color: grey;margin:22rpx 120rpx 0 120rpx"></view>
				<view class="flex_col center">
					<view style="font-size: 28rpx;color: black;">{{recommender.focus_count}}</view>
					<view style="font-size: 28rpx;color: black;">关注人数</view>
				</view>
			</view>
		</view>
	</view> -->
	
	
</template>

<script>
	import fl_image from "../fl_image.vue"
	export default {
		components:{
			fl_image,
		},
		name:"recommender_item",
		data() {
			return {
				
			};
		},
		methods:{
			click_recommender_item(){
				this.$emit("click_recommender_item",this.recommender)
			},
		},
		mounted() {
			
		},
		props:{
			recommender:{
				type:Object,
				default:null
			}
		}
	}
</script>

<style lang="scss">

.gridient_back{
	background-image:linear-gradient(to bottom , rgba(255, 255, 255, 0), #ffffff);
}
</style>
